<template>
	<view class="page-index">
		<uni-status-bar></uni-status-bar>
		<!-- 顶部背景 -->
		<view class="topbg">
			<image class="full-width-image" :src="CDN_BASE_URL + '/uploads/20250217/76027fd3b50bf6a688131799b9953247.png'" mode="aspectFill"></image>
		</view>
		<!-- 顶部搜索区域 -->
		<view class="top-box">
			<view class="top-title-box" @click="toBinding">
				<image class="arrow-image" :src="CDN_BASE_URL + '/uploads/20250217/f14371c02b2299441bf92281023377a8.png'" mode="aspectFit"></image>{{isSearch || '暂无选择社区'}}
			</view>
			<view class="top-input-box" @click="navigateToFuli">
				<image class="search-icon" :src="CDN_BASE_URL + '/uploads/20250217/518033771cbe24384443e84b57d863b4.png'" mode="aspectFit"></image>请输入您想搜索的商品名
			</view>
		</view>
		<!-- 中心功能区域 -->
		<view class="center-box">
			<view class="center-right-box">
				<view class="center-right-top-box" @click="gotodraw">
					<image class="full-width-image" :src="CDN_BASE_URL + '/uploads/20250217/5d5422d01be3905d2b6e32c16278671b.png'" mode="aspectFill"></image>
				</view>
				<view class="center-right-bom-box">
					<view class="center-right-bom1-box" @click="gotovip">
						<image class="full-width-image" :src="CDN_BASE_URL + '/uploads/20250217/b3eb7b87a34367efd2c22ec56101898c.png'" mode="aspectFill"></image>
					</view>
					<view class="center-right-bom2-box" @click="navigateToFuli">
						<image class="full-width-image" :src="CDN_BASE_URL + '/uploads/20250217/a09ad3438427e2cc901959a4f5800fcb.png'" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="center-lfet-box" @click="shyp">
				<image class="full-width-image" :src="CDN_BASE_URL + '/uploads/20250217/f5139b754d24572ab7c0a6a04a886e8c.png'" mode="aspectFill"></image>
			</view>
		</view>
		<!-- 轮播图区域 -->
		<view class="banner-box" @click="shyp">
			<image class="full-width-image" :src="CDN_BASE_URL + '/uploads/20250217/d873e0468f0fc9c88b740f0b1971af02.png'" mode="aspectFill"></image>
		</view>
		<!-- 商品展示区域 -->
		<view class="commodity-box">
			<view class="commodity-top-box">
				<view class="commodity-top-img-box">
					<image class="full-width-image" :src="CDN_BASE_URL + '/uploads/20250217/521fb966278bc4f3100cbedfe13ba3f6.png'" mode="aspectFill"></image>
				</view>
				<view class="commodity-top-title-box">
					福利商品
				</view>
				<view class="commodity-top-tiem-box">
					{{countdownTime}}
				</view>
				<view class="commodity-top-huan-box" @click="refreshProductList">
					<image class="refresh-icon" :src="CDN_BASE_URL + '/uploads/20250217/0bbd48f9cc8425d63f480fa15aa3640a.png'" mode="aspectFit"></image>
					换一批
				</view>
			</view>
			<view class="commodity-list-box">
				<!-- 商品列表渲染，增加空状态处理 -->
				<view v-if="sylist.length > 0" class="commodity-item-container">
					<view v-for="(item, index) in sylist" :key="index" class="commodity-item-box" @click="gotoProductDetail(item)">
						<image :src="item.coverPic" class="full-width-image" mode="aspectFill"></image>
					</view>
				</view>
				<view v-else class="empty-product-container">
					<empty></empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex'
import empty from '@/components/empty/index.vue'
import * as indexApi from '@/api/index.js'

export default {
	components: {
		empty
	},
	data() {
		return {
			isSearch: '',
		sylist: [],
			list: [
				{ image: '/static/index/1.png', url: '', type: 1 },
				{ image: '/static/index/2.png', url: '', type: 2 },
				{ image: '/static/index/3.png', url: '', type: 4 },
				{ image: '/static/index/4.png', url: '', type: 3 },
				{ image: '/static/index/5.png', url: '', type: 5 },
				{ image: '/static/index/6.png', url: '', type: 6 }
			],
			form: {
				type: 1,
				communityId: uni.getStorageSync('communityId'),
				pages: 1,
				limit: 3
			},
			countdownTime: ''
		}
	},
	computed: {
		...mapGetters(['CDN_BASE_URL'])
	},
	onShow() {
		this.isSearch = uni.getStorageSync('isSearch') || ''
	},
	onLoad(option) {
		this.initializePage()
	},
	methods: {
		// 初始化页面数据
		initializePage() {
			this.refreshProductList()
			this.loadCommunityBulletins()
			setInterval(() => {
				this.updateCountdown()
			}, 1000)
		},
		
		// 加载社区公告
		loadCommunityBulletins() {
			indexApi.communitybulletinList().then(res => {
				// 可以在这里处理公告数据
			})
		},
		
		// 刷新商品列表
		refreshProductList() {
			// 显示加载动画
			uni.showLoading({
				title: '加载中...'
			})
			
			indexApi.homeGoodsList(this.form).then(res => {
				this.sylist = res.homeGoodsList || []
			}).finally(() => {
				// 隐藏加载动画
				uni.hideLoading()
			})
		},
		
		// 更新倒计时
		updateCountdown() {
			// 实际项目中可以根据需求实现倒计时逻辑
			const now = new Date()
			this.countdownTime = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
		},
		
		// 导航到抽奖页面
		gotodraw() {
			this.$tools.navigate('/pages/draw/index')
		},
		
		// 导航到VIP页面
		gotovip() {
			this.$tools.navigate('/pages/user/vip/index')
		},
		
		// 导航到福利页面
		navigateToFuli() {
			this.$tools.navigate('/pagesShop/fuli/index')
		},
		
		// 导航到商品页面
		shyp() {
			this.$tools.navigate('/pagesShop/shyp/index')
		},
		
		// 导航到社区绑定页面
		toBinding() {
			this.$tools.navigate('/pages/binding/index')
		},
		
		// 导航到商品详情
		gotoProductDetail(e) {
			if (e && e.id) {
				this.$tools.navigate(`/pages/list/detli/index?id=${e.id}`)
			} else {
				uni.showToast({
					title: '商品信息有误',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style scoped lang="scss">
	@import 'page.scss';
	
	/* 通用样式 */
	.full-width-image {
		width: 100%;
		height: 100%;
	}
	
	.arrow-image {
		width: 30rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	
	.search-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
		margin-left: 10rpx;
	}
	
	.refresh-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 5rpx;
	}
	
	.commodity-item-container {
		display: flex;
		align-items: center;
	}
	
	.empty-product-container {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>